<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/JQuery3.6.js"></script>
    <script>
        //通过JQuery来实现Ajax
        $(function () {
            $.ajax({
                "url":"/AjaxJQueryFilter/CS",
                "type":"get",
                "data":{"level":"1"},
                "dataType":"json",
                "success":function (json) {
                    console.log(json);
                    for (var i = 0;i < json.length;i++){
                        var ch = json[i];
                        //append就是直接添加到源代码中
                        $("#lv1").append("<option value='"+ch.code+"'>"+ ch.name +"</option>")
                    }
                }
            })
        })

        $(function () {
            $("#lv1").on("change",function () {
                var parent = $(this).val();
                console.log(parent);
                $.ajax({
                    "url":"/AjaxJQueryFilter/CS",
                    "type":"get",
                    "data":{"level":"2","parent":parent},
                    "dataType":"json",
                    "success":function (json) {
                        console.log(json);
                        //移除所有lv的选项
                        $("#lv2>option").remove();
                        for (var i = 0;i < json.length;i++){
                            var ch = json[i];
                            //append就是直接添加到源代码中
                            $("#lv2").append("<option value='"+ch.code+"'>"+ ch.name +"</option>")
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
    <select id="lv1" style="width:200px;height: 30px">
        <option selected="selected">请选择</option>
    </select>
    <select id="lv2" style="width:200px;height: 30px"></select>
</body>
</html>